<template>
	<view class="page">
		<!-- <helloComp myval="hello next"></helloComp> -->
		<!-- 轮播图 start -->
		<swiper :indicator-dots="true" :autoplay="true" :circular="true" class="carousel">
			<swiper-item v-for="(carousel, index) in carouselList" :key="carousel.id"><image :src="carousel.image" class="carousel"></image></swiper-item>
			<!-- <swiper-item>
				<image src="../../static/carousel/batmanvssuperman.png" mode="" class="carousel"></image>
			</swiper-item>
			<swiper-item>
				<image src="../../static/carousel/spiderman.png" mode="" class="carousel"></image>
			</swiper-item> -->
		</swiper>
		<!-- 轮播图 end -->
		<!-- 热门超英 start -->
		<view class="page-block super-hot">
			<view class="hot-title-wapper">
				<image src="../../static/icos/hot.png" class="hot-ico"></image>
				<view class="hot-title">热门超英</view>
			</view>
		</view>
		<scroll-view scroll-x="true" class="page-block hot">
			<view class="single-poster" v-for="(hotSuperhero, index) in hotSuperheroList" :key="hotSuperhero.id">
				<navigator :url="'../movie/movie?trailerId=' + hotSuperhero.id">
					<view class="poster-wapper">
						<image :src="hotSuperhero.cover" class="poster"></image>
						<view class="movie-name">{{ hotSuperhero.name }}</view>
					</view>
					<trailerStars :innerScore="hotSuperhero.score" :showNum="1"></trailerStars>
				</navigator>
			</view>
		</scroll-view>
		<!-- 热门超英 end -->
		<!-- 热门预告 start -->
		<view class="page-block super-hot">
			<view class="hot-title-wapper">
				<image src="../../static/icos/interest.png" class="hot-ico"></image>
				<view class="hot-title">热门预告</view>
			</view>
		</view>
		<view class="page-block hot-movies">
			<video
				:id="trailer.id"
				:data-playingIndex="trailer.id"
				@play="meIsPlaying"
				v-for="(trailer, index) in hotTrailerList"
				:key="index"
				:src="trailer.trailer"
				:poster="trailer.poster"
				class="hot-movies-single"
				controls
			></video>
		</view>
		<!-- 热门预告 end -->

		<!-- 猜你喜欢 start -->
		<view class="page-block super-hot">
			<view class="hot-title-wapper">
				<image src="../../static/icos/guess-u-like.png" class="hot-ico"></image>
				<view class="hot-title">猜你喜欢</view>
			</view>
		</view>
		<view class="page-block guess-u-like">
			<view class="single-like-movie" v-for="(guessULike, gIndex) in guessULikeList" :key="guessULike.id">
				<image :src="guessULike.cover" class="like-movie"></image>
				<view class="movie-desc">
					<view class="movie-title">{{ guessULike.name }}</view>
					<trailerStars :innerScore="guessULike.score" :showNum="0"></trailerStars>
					<view class="movie-info">{{ guessULike.basicInfo }}</view>
					<view class="movie-info">{{ guessULike.releaseDate }}</view>
				</view>
				<view class="movie-oper" :data-gIndex="gIndex" @click="praiseMe">
					<image src="../../static/icos/praise.png" class="praise-ico"></image>
					<view class="praise-me">点赞</view>
					<view :animation="animationDataArr[gIndex]" class="praise-me animation-opacity">+1</view>
				</view>
			</view>
		</view>
		<!-- 猜你喜欢 end -->
	</view>
</template>

<script>
import helloComp from '../../components/helloComp.vue';
import trailerStars from '../../components/trailerStars.vue';
export default {
	data() {
		return {
			carouselList: [],
			hotSuperheroList: [],
			hotTrailerList: [],
			guessULikeList: [],
			animationData: {},
			animationDataArr: [{}, {}, {}, {}, {}]
		};
	},
	onUnload() {
		this.animationData = {};
		this.animationDataArr = [{}, {}, {}, {}, {}];
	},
	onPullDownRefresh() {
		this.refresh();
	},
	onHide() {
		if (this.videoContext) {
			// this.videoContext.pause()
		}
	},
	onLoad() {
		var me = this;
		// #ifdef APP-PLUS || MP-WEIXIN
		// 在页面创建的时候，创建一个临时动画对象
		this.animation = uni.createAnimation();
		// #endif

		// 请求qq
		uni.request({
			url: 'https://www.imovietrailer.com/superhero/sys/switches',
			method: 'POST',
			complete: function(res) {
				me.qq = res.data.ok;
				// 调用开始
				me.startPage();
			}
		});
	},
	methods: {
		// 播放一个视频的时候，需要暂停其他播放的视频
		meIsPlaying(e) {
			var me = this;
			var trailerId = '';
			if (e) {
				trailerId = e.currentTarget.dataset.playingindex;
				me.videoContext = uni.createVideoContext(trailerId);
			}
			var hotTrailerList = me.hotTrailerList;
			for (var i = 0; i < hotTrailerList.length; i++) {
				var tempId = hotTrailerList[i].id;
				if (tempId != trailerId) {
					uni.createVideoContext(tempId).pause();
				}
			}
		},
		refresh() {
			var me = this;

			uni.showLoading({
				mask: true
			});

			uni.showNavigationBarLoading();

			// 请求猜你喜欢数据
			uni.request({
				url: me.serverUrl + '/index/guessULike?qq=' + me.qq,
				method: 'POST',
				success: function(res) {
					// console.log(res.data)
					if (res.data.status == 200) {
						me.guessULikeList = res.data.data;
					} else {
						console.log(res.data.msg);
					}
				},
				complete: function() {
					uni.stopPullDownRefresh();
					uni.hideLoading();
					uni.hideNavigationBarLoading();
				}
			});
		},
		praiseMe(e) {
			// #ifdef APP-PLUS || MP-WEIXIN
			var gIndex = e.currentTarget.dataset.gindex;
			console.log(gIndex);
			// 构建动画数据
			this.animation
				.translateY(-60)
				.opacity(1)
				.step({ duration: 400 });

			this.animationData = this.animation;
			this.animationDataArr[gIndex] = this.animationData.export();

			setTimeout(
				function() {
					this.animation
						.translateY(0)
						.opacity(0)
						.step({ duration: 0 });
					this.animationData = this.animation;
					this.animationDataArr[gIndex] = this.animationData.export();
				}.bind(this),
				500
			);
			// #endif
		},
		startPage() {
			var me = this;
			// 请求轮播图数据
			uni.request({
				url: me.serverUrl + '/index/carousel/list?qq=' + me.qq,
				method: 'POST',
				success: function(res) {
					// console.log('请求轮播图', res.data);
					if (res.data.status == 200) {
						me.carouselList = res.data.data;
					} else {
						console.log(res.data.msg);
					}
				}
			});

			// 请求热门超英数据
			uni.request({
				url: me.serverUrl + '/index/movie/hot?type=superhero&qq=' + me.qq,
				method: 'POST',
				success: function(res) {
					// console.log(res.data)
					if (res.data.status == 200) {
						me.hotSuperheroList = res.data.data;
					} else {
						console.log(res.data.msg);
					}
				}
			});

			// 请求热门预告数据
			uni.request({
				url: me.serverUrl + '/index/movie/hot?type=trailer&qq=' + me.qq,
				method: 'POST',
				success: function(res) {
					// console.log(res.data)
					if (res.data.status == 200) {
						me.hotTrailerList = res.data.data;
					} else {
						console.log(res.data.msg);
					}
				}
			});

			// 请求猜你喜欢数据
			me.refresh();
		}
	},
	components: {
		helloComp,
		trailerStars
	}
};
</script>

<style>
@import url('index.css');
</style>
